<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
            float: left;
        }
        a{
            text-decoration: none;
        }
        .a{
            width: 1000px;
            text-align: center;
            margin: auto;
        }
        .b{
            width: 300px;
            position: absolute;
            top: 20px;
            left: 400px;
            height: 40px;
            margin-right: 800px;
        }
        .c{
            position: absolute;
            top: 10px;
            font-size: 20px;
        }
        select{
            height: 36px;
            width: 110px;
            border: 1px rgb(247, 222, 119);
            border-right: none;
        }
        .shouji{
            height: 34px;
            width: 210px;
            border: 1px rgb(255, 229, 126);
            outline: none;
        }
        .yzm{
            
            width: 310px;
            height: 20px;
            
            border: 1px cornsilk;
            outline: none;
            
        }
        .yzm1{
           
            left: 1070px;
            top: 294px;
            color: red;
        }
        .e{
            background-color: rgb(254, 194, 157);
            border: none;
            color: white;
            width: 320px;
            height: 36px;
            border-radius: 5px;
        }
        .l{
            font-size: 11px;
        }
        .f{
            color: rgb(255, 89, 0);
        }
        .g{
            text-align: right;
        }
        table{
            margin: auto;
            margin-top: 200px;
        }
        .i{
            padding-top: 10px;
            padding-bottom: 10px;
            height: 25px;
            border-top: 1px rgb(199, 199, 199);
            border-bottom: 1px rgb(199, 199, 199);
            line-height: 25px;
            color: rgb(116, 116, 116);
        }
        .i ul li{
            height: 25px;
            padding-left: 7px;
            padding-right: 7px;
            border-right: 2px rgb(199, 199, 199);
            font-size: 15px;
        }
        .j{
            padding-top: 10px;
            padding-bottom: 10px;
            height: 25px;
            line-height: 25px;
            color: rgb(82, 82, 82);
            padding-left: 10px;
        }
        .j ul li{
            height: 25px;
            padding-right: 7px;
            font-size: 15px;

        }
        .k{
            color: rgb(113, 113, 113);
        }
        .m{
            color: rgb(74, 74, 74);
        }
    </style>
</head>
<body>
    <div class="a">
        <div class="b">
            <img src="log.png" alt="" height="60px" width="192px">
            <span class="c">用户注册</span>
        </div>
        <div class="d">
            <table cellspacing="25">
                <tr>
                <td>手机号码</td>
                <td>
                    <select name="" id="">
                        <option value="">中国大陆+86</option>
                        <option value="">中国台湾+886</option>
                        <option value="">中国香港+852</option>
                        <option value="">马来西亚+60</option>
                        <option value="">新加坡+65</option>
                        <option value="">日本+81</option>
                        <option value="">韩国+82</option>
                    </select>
                    <input type="text" id="shouji" class="shouji" placeholder="请输入手机号码">
                    </td>
            </tr>
            <tr>
                <td>验证码</td>
                <td><input type="text" name="" class="yzm" placeholder="输入验证码" >
                <a href="javascript:;" class="yzm1">获取验证码</a></td>
            </tr>
            <tr>
                <td colspan="2">
                    <button class="e">同意协议并注册</button>
                </td>
            </tr>
            <tr>
                <td class="l" colspan="2">
                    已阅读并同意一下协议<span class="f">淘宝平台服务协议、隐私权政策、法<br>律声明、支付宝及客户端服务协议</span>
                </td>
            </tr>
            <tr>
                <td class="l f g" colspan="2">切换成企业用户注册</td>
            </tr>
            </table>
        </div>
        <div class="h">
            <div class="i">
                <ul>
                    <li>阿里巴巴集团</li>
                    <li>阿里巴巴国际站</li>
                    <li>阿里巴巴中国站</li>
                    <li>全球速卖通</li>
                    <li>淘宝网</li>
                    <li>天猫</li>
                    <li>聚划算</li>
                    <li>一淘</li>
                    <li>阿里妈妈</li>
                    <li>阿里云计算</li>
                    <li>云OS</li>
                    <li>万网</li>
                    <li>支付宝</li>
                </ul>
            </div>
            <div class="j">
                <ul>
                    <li>关于淘宝</li>
                    <li>合作伙伴</li>
                    <li>营销中心</li>
                    <li>联系客服</li>
                    <li>开放平台</li>
                    <li>诚征英才</li>
                    <li>联系我们</li>
                    <li>网站地图</li>
                    <li>法律声明及隐私权政策</li>
                </ul>
                <span>© 2021 Taobao.com 版权所有</span>
            </div>
            <div class="k">
                <span>网络文化经营许可证：<span class="m">文网文[2010]040号</span> </span>
                <span>增值电信业务经营许可证：浙B2-20080224-1</span>
                <span>信息网络传播视听节目许可证：1109364号</span>
            </div>
        </div>
    </div>
</body>
<script>
var btn = document.querySelector(".yzm1"); 
    btn.addEventListener("click", () => { 
    var text = document.querySelector("#shouji"); 
    if (text.value.length < 11) {
    alert("输入的手机号码不正确"); 
    } else {
    alert("发送成功"); 
 } 
 });
</script>
</html>